<template>
    <div class="packet-pane">
        <el-row :gutter="1">
            <el-col :span="17" style="position: relative">
                <el-input v-model="keyword" placeholder="请输入搜索关键词" size="small"/>
                <el-button :icon="Search" class="search-bn" type="text" @click="searchClick"/>
            </el-col>
            <el-col :span="7">
                <el-button size="small" plain @click="addGroupClick">新增分组</el-button>
            </el-col>
        </el-row>
        <el-tree
            ref="organizationTreeRef"
            node-key="id"
            :data="this.$store.state.userContactsGroup"
            :props="{
                value: 'id',
                label: 'groupName'
            }"
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
        >
<!--            :filter-node-method="filterTreeData"-->
            <template #default="{ node, data }">
                <el-row style="width: 100%">
                    <el-col :span="4">{{ node.label }}</el-col>
                    <el-col :span="4" :offset="16" style="float: right">
                        <el-button size="small" type="text" :icon="Edit" @click.stop="editClick(data)"></el-button>
                        <el-button size="small" type="text" :icon="Delete" @click.stop="deleteClick(data)"></el-button>
                    </el-col>
                </el-row>
            </template>
        </el-tree>
        <contacts-group-form ref="groupFormRef" @refresh-data="refreshUserGroup"/>
    </div>
</template>

<script>
import ContactsGroupForm from "../../form/ContactsGroupForm.vue";
import {Delete,Edit,Search} from '@element-plus/icons-vue'
import {deleteUserContactsGroup, queryUserContactsGroup} from "../../../../../network/sys/contacts-group";
export default {
    name: "PacketPane",
    components: {ContactsGroupForm},
    emits: ['search-group'],
    setup(){
        return{
            Delete,Edit,Search
        }
    },
    data(){
        return{
            keyword: null
        }
    },
    methods: {
        refreshUserGroup(){
            queryUserContactsGroup(this.$store.state.loginUser.id).then(vo=>{
                this.$store.commit('setUserContactsGroup',vo.data);
                console.log('查询结果用户组结果：',vo)
            })
        },
        searchClick(){
            console.log('r')
        },
        handleNodeClick(data,node,prop){
            console.log('点击了node');
            this.$emit('search-group',data);
        },
        addGroupClick(){
            let frm = this.$refs.groupFormRef;
            frm.title = '新增通讯组';
            frm.visible = true;
        },
        editClick(row){
            console.log('row',row)
            let frm = this.$refs.groupFormRef
            frm.visible = true;
            frm.titla  = '编辑组';
            frm.type = 1;
            this.$nextTick(function (){
                frm.setContactsGroup(row)
            })
        },
        deleteClick(data){
            this.$operate.remove({
                title: '删除组',
                data: `分组 '${data.groupName}' `,
                executeFn:()=>{
                    deleteUserContactsGroup({
                        ids: [data.id],
                        empId: this.$store.state.loginUser.id
                    }).then(vo=>{
                        this.$response.handle({
                            data: vo,
                            success: '删除成功',
                            successFn: ()=>{
                                this.refreshUserGroup();
                            },
                            log: '删除结果'
                        })
                    })
                }
            })
        }
    },
    created() {
        console.log('初始化用户组面板...')
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
}
.packet-pane{

}
.el-button+.el-button {
    margin-left: 6px;
}
.search-bn{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 2px;
    right: 7px;
}
.el-button--text{
    color: #666666;
}
</style>